<template>
  <view class="content">
    <view class="form">
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          学生姓名
        </view>
        <view class="ipt">
          <input type="text" placeholder="请输入学生姓名" v-model="info.username">
        </view>
      </view>
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          手机号码
        </view>
        <view class="ipt">
          <input type="number" placeholder="请输入手机号码" v-model="info.phone">
        </view>
      </view>
      <view class="item">
        <view class="label">
          <view class="starImg"></view>
          邮箱
        </view>
        <view class="ipt">
          <input type="text" placeholder="请输入邮箱" v-model="info.mailbox">
        </view>
      </view>
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          学校名称
        </view>
        <view class="ipt" @tap="schoolShow = true">
          <view class="text">
            {{schoolText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item">
        <view class="label">
          <view class="starImg"></view>
          性别
        </view>
        <view class="ipt" @tap="sexShow = true">
          <view class="text">
            {{sexText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="item">
        <view class="label">
          <view class="starImg"></view>
          年龄
        </view>
        <view class="ipt">
          <input type="number" placeholder="请输入年龄" v-model="info.age">
        </view>
      </view>
      <view class="item">
        <view class="label">
          <view class="starImg"></view>
          年级
        </view>
        <view class="ipt">
          <input type="text" placeholder="请输入年级" v-model="info.grade">
        </view>
      </view>
      <view class="item">
        <view class="label">
          <view class="starImg"></view>
          家长手机号
        </view>
        <view class="ipt">
          <input type="number" placeholder="请输入家长手机号" v-model="info.parents_phone">
        </view>
      </view>
      <view class="item">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          渠道
        </view>
        <view class="ipt" @tap="fromShow = true">
          <view class="text">
            {{fromText}}
          </view>
          <image class="lowerImg" src="../../static/img/lowerNew.png" mode=""></image>
        </view>
      </view>
      <view class="textBox">
        <view class="label">
          <image class="starImg" src="../../static/img/star.png" mode=""></image>
          学生情况
        </view>
        <view class="ipt">
          <u--textarea placeholder="请输入学生情况" placeholderStyle="font-size: 28rpx;color: red;"
            v-model="info.student_situation"></u--textarea>
        </view>
      </view>
    </view>
    <view class="btn" @tap="addUser()">
      确认提交
    </view>
    <!-- 学校名称下拉框 -->
    <u-picker :show="schoolShow" :columns="schoolColumns" keyName="school_name" @confirm="confirmSchool"
      @cancel="schoolShow = false"></u-picker>
    <!-- 性别下拉框 -->
    <u-picker :show="sexShow" :columns="sexColumns" keyName="label" @confirm="confirmSex"
      @cancel="sexShow = false"></u-picker>
    <!-- 渠道下拉框 -->
    <u-picker :show="fromShow" :columns="fromColumns" keyName="label" @confirm="confirmFrom"
      @cancel="fromShow = false"></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        schoolShow: false,
        schoolColumns: [],
        schoolText: "请选择学校",
        sexShow: false,
        sexColumns: [
          [{
            label: '男',
            id: 1
          }, {
            label: '女',
            id: 2
          }, {
            label: '未知',
            id: 3
          }]
        ],
        sexText: "未知",
        fromShow: false,
        fromColumns: [
          [{
            label: '个人',
            id: 1
          }, {
            label: '电销',
            id: 2
          }, {
            label: '抖音',
            id: 3
          }, {
            label: '地摊',
            id: 4
          }, {
            label: '合作',
            id: 5
          }, {
            label: '介绍',
            id: 6
          }]
        ],
        fromText: "请选择渠道",
        info: {
          user_id: '',
          username: '',
          phone: '',
          mailbox: '',
          school_id: '',
          sex: 3,
          age: '',
          grade: '',
          parents_phone: '',
          from: '',
          student_situation: ''
        }
      };
    },
    onLoad(option) {
      this.info.user_id = option.user_id
      this.getData(option.user_id)
      this.getAllSchool();
    },
    methods: {
      async getData(user_id) {
        const {
          data: res
        } = await uni.$http.post('school/student/getUserDetail', {
          user_id: user_id
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.info = res.data;

        if (res.data.sex == 1) {
          this.sexText = '男'
        }
        if (res.data.sex == 2) {
          this.sexText = '女'
        }
        if (res.data.sex == 3) {
          this.sexText = '未知'
        }

        if (res.data.from == 1) {
          this.fromText = '个人'
        }
        if (res.data.from == 2) {
          this.fromText = '电销'
        }
        if (res.data.from == 3) {
          this.fromText = '抖音'
        }
        if (res.data.from == 4) {
          this.fromText = '地摊'
        }
        if (res.data.from == 5) {
          this.fromText = '合作'
        }
        if (res.data.from == 6) {
          this.fromText = '介绍'
        }
      },
      async getAllSchool() {
        const {
          data: res
        } = await uni.$http.post('school/index/getAllSchool')
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        res.data.forEach(i => {
          if (this.info.school_id == i.id) {
            this.schoolText = i.school_name
          }
        })
        this.schoolColumns.push(res.data);
      },
      confirmSchool(e) {
        this.schoolText = e.value[0].school_name
        this.info.school_id = e.value[0].id
        this.schoolShow = false
      },
      confirmSex(e) {
        this.sexText = e.value[0].label
        this.info.sex = e.value[0].id
        this.sexShow = false
      },
      confirmFrom(e) {
        this.fromText = e.value[0].label
        this.info.from = e.value[0].id
        this.fromShow = false
      },
      async addUser() {
        const {
          data: res
        } = await uni.$http.post('school/student/saveUserInfo', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.toast.msg('修改成功')
        setTimeout(() => {
          uni.navigateTo({
            url: '../student/index'
          })
        }, 1000)
      }
    }
  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;

    .form {
      width: 652rpx;
      margin: 40rpx auto;

      .item {
        display: flex;
        align-items: center;
        padding: 0 35rpx 0 19rpx;
        margin-bottom: 30rpx;
        width: 652rpx;
        height: 78rpx;
        line-height: 78rpx;
        border-radius: 10rpx;
        border: 2rpx solid #FCF7F7;

        .label {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          margin-right: 70rpx;
          width: 160rpx;

          .starImg {
            width: 14rpx;
            height: 42rpx;
            margin-right: 15rpx;
          }
        }

        .ipt {
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          color: #666;

          .lowerImg {
            position: absolute;
            right: 0;
            width: 20rpx;
            height: 11rpx;
          }
        }

        .time {
          color: #666;
          display: flex;
          align-items: center;

          .timeImg {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;

          }
        }
      }

      .textBox {
        padding: 0 35rpx 0 19rpx;
        display: flex;
        border: 2rpx solid #FCF7F7;

        .label {
          height: 70rpx;
          display: flex;
          align-items: center;
          font-size: 28rpx;
          margin-right: 70rpx;
          width: 160rpx;

          .starImg {
            width: 14rpx;
            height: 42rpx;
            margin-right: 15rpx;
          }
        }

        .ipt {
          flex: 1;
          height: 352rpx;

          .u-textarea {
            height: 352rpx;
            border: none;
            padding-left: 0;

            /deep/.u-textarea__field {
              height: 352rpx !important;
            }

            .uni-textarea-textarea {
              height: 352rpx;
            }
          }
        }
      }
    }

    .btn {
      position: fixed;
      bottom: 50rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 652rpx;
      height: 78rpx;
      line-height: 78rpx;
      text-align: center;
      background: #CCCCCC;
      border: 2rpx solid #69A1E0;
    }
  }
</style>